<!--银行卡管理-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="收货人姓名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入收货人姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="success"
          icon="el-icon-plus"
          plain
          size="mini"
          @click="handleAdd()"
          v-hasPermi="['video:list:add']"
          v-show="showAdd"
        >新增</el-button>
      </el-form-item>
      <el-form-item label="当前用户：" v-if="id">
        <span style="font-weight:bold;">{{userName}}</span>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column
        label="用户名"
        align="center"
        prop="sysUserName"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="收货人姓名"
        align="center"
        prop="userName"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="收货人地址"
        align="center"
        prop="address"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="联系电话"
        align="center"
        prop="mobile"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="是否默认地址"
        align="center"
        prop="defaultAddress"
        width="180"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{ scope.row.defaultAddress ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column
        label="国家"
        align="center"
        prop="countryName"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="邮编"
        align="center"
        prop="postalCode"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="邮箱"
        align="center"
        prop="email"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="城市"
        align="center"
        prop="city"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="地标"
        align="center"
        prop="landmark"
        width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rulesAddress"
        @close="$refs['form'].clearValidate();"
      >
        <el-form-item label="收货人姓名" prop="receiveUserName">
          <el-input
            v-model="form.receiveUserName"
            placeholder="请输入收货人姓名"
            @input="changeReceiveUserName"
          />
        </el-form-item>
        <el-form-item label="收货人地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入收货人地址" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地区编号" prop>
              <el-select v-model="form.areaId" placeholder @change="changeAreaId">
                <el-option
                  v-for="(item) in areaIdList"
                  :key="item.country"
                  :label="item.tel+'('+item.country+')'"
                  :value="item.tel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="mobile">
              <el-input v-model="form.mobile" type="number" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="form.mobile" type="number" placeholder="请输入联系电话"/>
        </el-form-item>-->
        <el-form-item label="国家" prop="countryName">
          <!-- <el-input v-model="form.countryName" placeholder="请输入国家"/> -->
          <el-select
            v-model="form.country"
            placeholder="请输入国家"
            style="width: 200px;"
            @change="changeCountry"
          >
            <el-option
              v-for="(item) in countryNameList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮编" prop="postalCode">
          <el-input v-model="form.postalCode" type="number" placeholder="请输入邮编" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <!-- <el-input v-model="form.city" placeholder="请输入城市"/> -->
          <el-select
            v-model="form.city"
            placeholder="请输入国家"
            style="width: 200px;"
            @change="changeCity"
          >
            <el-option
              v-for="(item) in cityList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地标" prop="landmark">
          <el-input v-model="form.landmark" placeholder="请输入地标" />
        </el-form-item>
        <el-form-item label="是否默认" prop>
          <el-switch
            v-model="form.defaultAddress"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { manageList, deleteManageData, manageDataDetails, addManageData, updateState } from '@/api/bank/bankCard'
import OssImagePreview from '@/components/ImagePreview/oss-image-preview.vue'
import { addressAdd, addressDel, addressEdit, addressPage, getInternationalTelephoneAreaCode, shopAddress } from '@/api/user/userAddress'

export default {
  name: 'bankCardManage',
  components: { OssImagePreview },
  data () {
    return {
      areaIdList: [],
      countryNameList: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 用户完成线下理财信息表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userType: 0,
      },

      rulesAddress: {
        userName: [
          { required: true, message: '收货人姓名不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '收货人地址不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ],
        postalCode: [
          { required: true, message: '邮编不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '城市不能为空', trigger: 'blur' }
        ],
        landmark: [
          { required: true, message: '地标不能为空', trigger: 'blur' }
        ],
        country: [
          { required: true, message: '国家不能为空', trigger: 'blur' }
        ],
      },

      open: false,
      title: '',
      // 表单参数
      form: {
        receiveUserName: null
      },
      // 表单校验
      rules: {},
      showAdd: false,
      id: null,
      cityList: [],
      userName: null

    }
  },
  created () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.userName = this.$route.query.userName
      this.showAdd = true
    }
    this.getList()
    this.getShopAddress(null, "0")
    this.getInternationalTelephoneAreaCode()
  },
  methods: {
    // 改变国家，城市清空
    changeCountry (value) {
      this.form.city = null
      this.getShopAddress(value, "1")
    },
    changeCity () {
      this.$forceUpdate()
    },
    // 国家
    getShopAddress (code, type) {
      shopAddress({
        "areaId": code,
        "level": type
      }).then(response => {
        if (type == "0") {
          this.countryNameList = response.data
        } else {
          this.cityList = response.data
        }
      })
    },
    getInternationalTelephoneAreaCode () {
      getInternationalTelephoneAreaCode().then(response => {
        this.areaIdList = response.data
      })
    },
    changeAreaId (value) {
      console.log(value)
      this.form.areaId = value
      this.$forceUpdate()
      // this.form.mobile = value+'-'+this.form.mobile
    },
    /** 查询用户完成线下理财信息列表 */
    getList () {
      this.loading = true
      this.queryParams.userId = this.id
      delete this.queryParams.userType
      addressPage(this.queryParams).then(response => {
        this.dataList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const id = row.id
      this.$modal.confirm('是否确认删除该地址？').then(function () {
        return addressDel(id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 新增 */
    handleAdd (row) {
      this.reset()
      this.open = true
      this.title = '添加地址'
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {}
      this.resetForm('form')
    },
    changeReceiveUserName (v) {
      this.form.receiveUserName = v
      this.$forceUpdate()
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      console.log(row)
      this.reset()
      this.form = JSON.parse(JSON.stringify(row))
      let index = row.mobile.indexOf("-")//获取第一个"_"的位置
      this.form.areaId = row.mobile.substring(0, index)
      this.form.receiveUserName = row.userName
      this.areaIdList.map((item) => {
        if (this.form.areaId == item.tel) {
          this.form.areaId = item.tel + '(' + item.country + ')'
        }

      })
      this.form.mobile = row.mobile.substring(index + 1, row.mobile.length)
      console.log('this.form', this.form)
      this.open = true
      this.title = '修改地址'
    },
    /** 提交按钮 */
    submitForm () {
      if (this.title == '添加地址') {
        this.form.mobile = this.form.areaId + '-' + this.form.mobile
      }
      this.countryNameList.map((item) => {
        if (this.form.country == item.areaId) {
          this.form.countryName = item.areaName
        }

      })
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.form.defaultAddress) this.form.defaultAddress = false
          if (this.form.userId != null) {
            addressEdit(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          } else {
            this.form.userId = this.id
            addressAdd(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }

        }
      })
    },
  }
}
</script>
